<!DOCTYPE html>
<html>
<head>
<style>
.region {
    border: 1px solid #333;
}

.region::before {
    border: 1px solid #333;
    background: #eee;
    content: '::before';
    text-align: center;
    display: run-in;
    width: 50px;
    height: 15px;
}

.region::after {
    border: 1px solid #555;
    background: #eee;
    content: '::after';
    text-align: center;
    width: 50px;
    height: 15px;
    display: block;
}

.region.float.left {
    float: left;
    margin-bottom: 2em;
}

.region .rfcb {
    border: 1px solid red;
}

body {
    width: 50em;
    margin-left: auto;
    margin-right: auto;
    font-family: Myriad Pro;
}

h2 {
    color: #888;
    font-weight: normal;
}

h2 .config {
    font-weight: bold;
    color: #666;
}

</style>
</head>
<body>
    
<div style="float:left;border: 1px solid red"><div><div style="border: 1px solid lime;width:300px;height:200px"></div></div            s></div>
<h2 style="clear:left;">Region not requiring content measure <span class="config">width:300px height:150px</span>   </h2>

<div class="region float left" style="width:300px;height:150px"><div class="rfcb" style="height:0px"></div></div>

<div class="region float left" style="width:300px;height:150px;margin-left: 1em"><div class="rfcb" style="height:114px"></div></div>

<h2 style="clear:left">Region requiring horizontal content measure only <span class="config">width:auto height:150px</span>   </h2>

<div class="region float left" style="width:auto;height:150px;"><div class="rfcb" style="width:200px;height:0px"></div></div>

<div class="region float left" style="width:auto;height:150px;margin-left: 1em"><div class="rfcb" style="width:200px;height:114px"></div></div>

<h2 style="clear:left">Region requiring vertical content measure only <span class="config">width:300px height:auto</span></h2>

<div class="region float left" style="width:300px;height:auto;"><div class="rfcb" style="height:0px"></div></div>

<div class="region float left" style="width:300px;height:auto;margin-left: 1em"><div class="rfcb" style="width:auto;height:80px"></div></div>

<h2 style="clear:left">Region requiring shrink-wrap <span class="config">width:auto height:auto</span>   </h2>

<div class="region float left" style="width:auto;height:auto"><div class="rfcb" style="width:200px;height:0px"></div></div>

<div class="region float left" style="width:auto;height:150px;margin-left: 1em"><div class="rfcb" style="width:200px;height:114px"></div></div>



</body>

</html>
